<template>
  <div
    class="m-layer z-show m-layer-w2"
    :style="{ top: targetY, left: '342px' }"
    ref="copyright"
    v-show="isshow"
  >
    <div class="zbar" @mousedown.stop="move">
      <div class="zttl f-thide">提示</div>
    </div>
    <div class="zcnt">
      <div class="lyct f-cb f-tc">
        <div class="f-fs1" style="padding: 0 20px; line-height: 22px">
          由于版权保护，您所在的地区暂时无法使用。
        </div>
        <div class="lybtn">
          <a
            href="javascript:;"
            hidefocus="true"
            class="u-btn2 u-btn2-2 u-btn2-w2"
            @click="isshow = false"
          >
            <i>知道了</i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isshow: false,
      targetY: "",
    };
  },
  methods: {
    show(Y) {
      this.targetY = Y - 166 / 2 + "px";
      this.isshow = true;
    },
    move(e) {
      //拖动整个收藏栏
      var x = e.pageX - this.$refs.copyright.offsetLeft;
      var y = e.pageY - this.$refs.copyright.offsetTop;
      var _this = this;
      document.addEventListener("mousemove", Boxmove);
      function Boxmove(e) {
        _this.$refs.copyright.style.left = e.pageX - x + "px";
        _this.$refs.copyright.style.top = e.pageY - y + "px";
      }
      document.addEventListener("mouseup", function () {
        document.removeEventListener("mousemove", Boxmove);
      });
    },
  },
};
</script>

<style scoped>
div.m-layer-w2 {
  width: 480px;
}
div.m-layer {
  position: absolute;
  z-index: 9998;
  width: 480px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: none;
}
div.m-layer .zbar {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid #191919;
  border-radius: 4px 4px 0 0;
  background: #2d2d2d;
  line-height: 30px;
}
div.m-layer .zbar,
div.m-layer .zttl {
  cursor: move;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div.m-layer .zttl {
  padding-right: 45px;
  margin: 0;
  height: 38px;
  line-height: 38px;
  padding-left: 18px;
  border-radius: 3px 3px 0 0;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  background-position: 50% 0;
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
div.m-layer div.zcnt {
  padding: 0;
  border: 1px solid #878787;
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  background: #fff;
}
div.m-layer .lyct {
  padding: 40px 0;
}
.f-tc {
  text-align: center;
}
div.m-layer .lybtn {
  margin-top: 30px;
}
div.m-layer .lybtn a,
div.m-layer .lsbtn a {
  margin: 0 10px;
}
.u-btn2,
.u-btn2 i,
.u-btn2 .icn,
.u-btni,
.u-btni i,
.u-tag,
.u-tag i,
.u-btni-addply .ply {
  background: url("../../assets/imgs/button2.png") no-repeat 0 9999px;
}
.u-btn2-2 {
  color: #fff;
  display: inline-block;
  background-position: right -428px;
}
.u-btn2 {
  padding: 0 5px 0 0;
  white-space: nowrap;
}
.u-btn2-w2 i {
  width: 40px;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
  display: inline-block;
  padding: 0 15px 0 20px;
  background-position: 0 -387px;
}
</style>